<template>
	<view class="page">
		<u-navbar :is-back="false" :title="title" title-color="#FFF" :background="backgroundStyle"></u-navbar>
		<view class="swiper">
			<u-swiper :list="swiper" height="320"></u-swiper>
		</view>
		<view class="tabs">
			<u-tabs-swiper ref="tabs" name="tabs_name" :list="tabs" :current="tabs_current" @change="tabsChange"></u-tabs-swiper>
		</view>
		<swiper :current="swiperCurrent" @transition="transition" @animationfinish="animationfinish">
			<swiper-item class="swiper-item" v-for="(item, index) in tabs" :key="index">
				<scroll-view scroll-y style="height: 800rpx;width: 100%;" @scrolltolower="onreachBottom">
					{{swiperCurrent}}
					<u-row gutter="16">
						<u-col span="2" text-align="center">
							<view class="demo-layout">
								<u-avatar :src="avatar"></u-avatar>
							</view>
						</u-col>
						<u-col span="7">
							<view class="demo-layout">
								<view class="title">
									拼夕夕砍价任务
								</view>
								<view class="order_type">
									<view class="type">
										<u-tag text="拼夕夕" size="mini" :show="true" color="#FFF" bg-color="#999" border-color="#999" />
									</view>
									<view class="number">
										剩余数量
									</view>
								</view>
							</view>
						</u-col>
						<u-col span="3" text-align="center">
							<view class="demo-layout">金额</view>
						</u-col>
					</u-row>
				</scroll-view>
			</swiper-item>
		</swiper>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				title: "首页",
				backgroundStyle: {
					backgroundImage: 'linear-gradient(45deg, rgb(28, 187, 180), rgb(141, 198, 63))'
				},
				swiper: [{
						image: 'https://cdn.uviewui.com/uview/swiper/1.jpg',
						title: '昨夜星辰昨夜风，画楼西畔桂堂东'
					},
					{
						image: 'https://cdn.uviewui.com/uview/swiper/2.jpg',
						title: '身无彩凤双飞翼，心有灵犀一点通'
					},
					{
						image: 'https://cdn.uviewui.com/uview/swiper/3.jpg',
						title: '谁念西风独自凉，萧萧黄叶闭疏窗，沉思往事立残阳'
					}
				],
				tabs: [{
					tabs_name: '全部'
				}, {
					tabs_name: '推荐'
				}, {
					tabs_name: '拼夕夕',
				}, {
					tabs_name: '嘀嘀',
				}, {
					tabs_name: '桃宝',
				}, {
					tabs_name: '惊喜',
				}, {
					tabs_name: '筷手',
				}, {
					tabs_name: '惊动金融',
				}, {
					tabs_name: '其他',
				}],
				tabs_current: 0,
				swiperCurrent: 0,
				avatar: 'http://pic2.sc.chinaz.com/Files/pic/pic9/202002/hpic2119_s.jpg'
			}
		},
		onLoad() {

		},
		methods: {
			tabsChange(index) {
				this.swiperCurrent = index;
				this.tabs_current = index;
			},
			// swiper-item左右移动，通知tabs的滑块跟随移动
			transition(e) {
				let dx = e.detail.dx;
				this.$refs.uTabs.setDx(dx);
			},
			// 由于swiper的内部机制问题，快速切换swiper不会触发dx的连续变化，需要在结束时重置状态
			// swiper滑动结束，分别设置tabs和swiper的状态
			animationfinish(e) {
				let current = e.detail.current;
				this.$refs.uTabs.setFinishCurrent(current);
				this.swiperCurrent = current;
				this.tabs_current = current;
			},
		}
	}
</script>

<style lang="scss" scoped>
	.swiper {
		padding: 0 0 16rpx;
	}

	.demo-layout {
		height: 48rpx;
		border-radius: 8rpx;
		line-height: 48rpx;

		.title {
			width: 300rpx;
		}

		.order_type {
			display: flex;
		}
	}

	.bg-purple {
		background: #d3dce6;
	}

	.bg-purple-light {
		background: #e5e9f2;
	}

	.bg-purple-dark {
		background: #99a9bf;
	}
</style>
